<style scoped></style>

<template>

    <h1>所有评价</h1>
    <div class="rating">
        <ul>
            <template v-for="rating in ratings" :key="rating.id">
                <li>{{ rating.content }}</li>
            </template>
        </ul>
    </div>
    <h2>好评</h2>
    <div class="rating">
        <ul>
            <template v-for="rating in ratings" :key="rating.id">
                <li v-if="rating.falg===0">{{ rating.content }}</li>
            </template>
        </ul>
    </div>
    <h1>差评</h1>
    <div class="rating">
        <ul>
            <template v-for="rating in ratings" :key="rating.id">
                <li v-if="rating.falg===1">{{ rating.content }}</li>
            </template>
        </ul>
    </div>
    <button @click="addRating()">加一个评价</button>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';


// 所有评价 | 好评 | 差评
const _ratings = [
    {id:1,falg:0,content:"好评1"},
    {id:2,falg:1,content:"差评"},
    {id:3,falg:0,content:"好评2"},
    {id:4,falg:0,content:"好评3"},
] 

let ratings = reactive(_ratings); // 响应式

const addRating = ()=>{
    ratings.push({id:5,falg:1,content:"差评"})
}

</script>